<template>
	<!-- 出/入库记录 -->
	<div style="padding:20px 20px;">
			<el-input clearable @keyup.enter.native="get_data()" style="width:302px;" placeholder="输入申请人全名搜索" v-model="usernames" class="input-with-select">
			  <el-button @click='get_data()' slot="append" icon="el-icon-search"></el-button>
			</el-input>
			<el-input clearable @keyup.enter.native="get_data()" style="width:302px;" placeholder="输入物品名称搜索" v-model="names" class="input-with-select">
			  <el-button @click='get_data()' slot="append" icon="el-icon-search"></el-button>
			</el-input>
			<el-table v-loading="loading" :data="tableData" @row-click="deli" stripe style="width:100%; margin-top:20px;">
				<el-table-column header-align='center' align='center' prop="type" label="类型"></el-table-column>
				<el-table-column v-if="states" header-align='center' align='center' prop="goodsSku" label="物料编码"></el-table-column>
				<el-table-column header-align='center' align='center' prop="goodsName" label="物品名称"></el-table-column>
				<el-table-column header-align='center' align='center' prop="createdTime" label="创建时间"></el-table-column>
				<el-table-column header-align='center' align='center' prop="amount" label="申请数量"></el-table-column>
				<el-table-column header-align='center' align='center' prop="price" label="单价">
					<template slot-scope="scope">{{scope.row.price}} ￥</template>
				</el-table-column>
				<el-table-column header-align='center' align='center' prop="remarks" label="备注" show-overflow-tooltip></el-table-column>
				<el-table-column header-align='center' align='center' prop="reason" label="申请原因" show-overflow-tooltip></el-table-column>
				<el-table-column header-align='center' align='center' prop="createdBy" label="申请人"></el-table-column>
				
			</el-table>
			<!-- 分页 -->
			<el-pagination v-show="totals>sizec" style=' margin-top:35px;width:100%;text-align: center;' :page-size="sizec"
			 :total="totals" :page-sizes="ye_s" background @size-change="handleSizeChange" @current-change="handleCurrentChange"
			 layout="total, sizes, prev, pager, next, jumper">
			</el-pagination>
		<InOut ref="qq" :active="isActive" :dataList="details_data"></InOut>
	</div>
</template>

<script>
	import {InOutStock} from '@/api_bast/stock.js'
	import InOut from '@/components/MES/stock/InOutdetails.vue'
	export default {
		name: '',
		data() {
			return {
				details_data: {
					goodsSku: '', //物料编码
					isDone: '', //状态
					price: '', //单价
					remarks: '', //备注
					reason: '', //申请原因
					createdBy: '', //申请人
					goodsName: '', //物品名称
					model: '', //物品型号
					size: '', //尺寸
					type: '', //类型
					provider: '' ,//供应商
					createdTime: '',//创建时间
					amount: ''//数量
				},
				isActive: false,
				page: 1,//页数
				sizec: 15,
				ye_s: [15, 20],
				names: '',//查询物品名称
				usernames: '',//查询申请人
				loading: false,
				totals: 0, //总条数
				tableData: [] ,//返回数据
				index: 0,//接口参数state的值
				states: true//物料编码的显示和隐藏
			}
		},
		components: {
			InOut
		},
		methods: {
			deli(i){//出/入库详情开关
				this.details_data = i
				this.$refs.qq.qf()
				this.$refs.qq.statec = this.states
			},
			get_data(i) { //获取数据
				let dat = {
					state: this.index,
					goodsName: this.names,
					createdBy: this.usernames,
					pageNo: this.page,
					pageSize: this.sizec
				}
				console.log(dat)
				this.loading = true;
				InOutStock(dat).then(res => {
					this.loading = false
					if(dat.state === 0){
						this.totals = res.resData.out.total;
						this.tableData = res.resData.out.list;
					}else if(dat.state === 1){
						this.totals = res.resData.in.total;
						this.tableData = res.resData.in.list;
					}
				})
			},
			handleSizeChange(val) { //每页条数改变时触发
				this.sizec = val
				this.get_data()
			},
			handleCurrentChange(val) { //当前页改变时触发
				this.page = val
				this.get_data()
			}
		},
		mounted() {
			this.get_data()
		}
	}
</script>

<style scoped="scoped">

</style>
